<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 60px;
            margin: 100px auto;
            background-color: cornflowerblue;
        }

        span {
            display: inline-block;
            height: 50px;
            width: 80px;
            text-align: center;
            line-height: 50px;
            color: rgb(167, 19, 235);
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div>
        秒杀倒计时
        <span class="h">3小时</span>
        <span class="m">25分钟</span>
        <span class="s">25秒</span>
    </div>
    <script>
        const spanHObj = document.querySelector(".h");
        const spanMObj = document.querySelector(".m");
        const spanSObj = document.querySelector(".s");

        // 商品的秒杀时间
        const creatTime = new Date("2025-6-01 23:00:00")

        function payment() {
            const currentTime = new Date();
            const timeSecond = (creatTime - currentTime) / 1000;

            // 计算出小时
            let h = parseInt(timeSecond / 60 / 60 % 24);
            spanHObj.innerHTML = h + "小时";

            // 计算出分钟
            let m = parseInt(timeSecond / 60 % 60);
            spanMObj.innerHTML = m + "分钟";

            // 计算出秒
            let s = parseInt(timeSecond % 60);
            spanSObj.innerHTML = s + "秒";
        }

        setInterval(payment, 1000);
    </script>
</body>

</html>